import React, { useState, useEffect, useRef } from "react";
import * as echarts from "echarts";
import styles from "./styles.module.scss"
import notFoundData from "@/echarts/notFoundData";
const config = [
    { // 渐变色
        "x": 1,
        "y": 0,
        "x2": 1,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
            "offset": 0,
            "color": "rgba(163, 124, 48, 1)"
        }, {
            "offset": 1,
            "color": "rgba(191, 148, 61, 1)"
        }]
    },
    { // 渐变色
        "x": 1,
        "y": 0,
        "x2": 1,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
            "offset": 0,
            "color": "rgba(104, 221, 153, 1)"
        }, {
            "offset": 1,
            "color": "rgba(53, 116, 90, 1)"
        }]
    },
    { // 渐变色
        "x": 1,
        "y": 0,
        "x2": 1,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
            "offset": 0,
            "color": "rgba(71, 141, 245, 1)"
        }, {
            "offset": 1,
            "color": "rgba(92, 176, 252, 1)"
        }]
    },

]

/**
 * 
 * @param {} param0 
 * @returns
 * @description 空心阴影环形图 
 */
const HollowShadowRingGraph = ({
    style = {
        width: 400,
        height: 200,
    },
    pieType = 1,
    unit = "个",
    title = "echart图形模块",
    filedsName = {
        name: "name",
        value: "value"
    },
    list = [
        // { value: 1, name: '险种1' },
        // { value: 2, name: '险种2' },
        // { value: 3, name: '险种3' },
    ]
}) => {
    const echartRef = useRef();
    let pieChart = null;
    const options2 = {
        backgroundColor: 'rgba(0,0,0,0)', //设置无背景色
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                selectedMode: 'single',
                // radius: [0, '30%'],
                roseType: 'area',
                itemStyle: {
                    // borderRadius: 8,
                },
                labelLine: {
                    show: false
                },
                label: {
                    position: 'inner',
                    fontSize: 14,
                    formatter: ({ value }) => {
                        return `${value}万元`;
                    },
                    color: "#fff"
                },
                data: list.map((item, index) => ({
                    name: item[filedsName.name],
                    value: item[filedsName.value],
                    itemStyle: {
                        // borderRadius: 60, // 圆角
                        color: config[index]

                    },
                    // label: {

                    //     alignTo: 'edge',
                    //     formatter: '{name|{b}}\n{time|{c} %}',
                    //     minMargin: 5,
                    //     edgeDistance: 10,
                    //     lineHeight: 15,
                    //     rich: {
                    //         time: {
                    //             fontSize: 10,
                    //             // color: '#3775f5'
                    //             color: config[index].colorStops[0].color,
                    //         }
                    //     }
                    // },
                })),
                // data: [
                //     {
                //         value: 26,
                //         name: 'rose 6',
                //         itemStyle: {
                //             color: config[0]
                //         }

                //     },
                //     {
                //         value: 22,
                //         name: 'rose 7',
                //         itemStyle: {
                //             color: config[1]
                //         }

                //     },
                //     {
                //         value: 18,
                //         name: 'rose 8',
                //         itemStyle: {
                //             color: config[2]
                //         }

                //     }
                // ]
            }
        ]
    };



    const options = {
        backgroundColor: 'rgba(0,0,0,0)', //设置无背景色

        tooltip: {
            trigger: 'item',
            confine: true,

        },
        series: [
            {
                name: title,
                type: 'pie',
                radius: ['55%', '80%'],
                data: list.map((item, index) => ({
                    name: item[filedsName.name],
                    value: item[filedsName.value],
                    itemStyle: {
                        // borderRadius: 60, // 圆角
                        color: config[index],
                    },
                    label: {
                        show: false,
                        alignTo: 'edge',
                        formatter: '{name|{b}}\n{time|{c} %}',

                        minMargin: 5,
                        edgeDistance: 10,
                        lineHeight: 15,
                        rich: {
                            time: {
                                fontSize: 10,
                                // color: '#3775f5'
                                color: config[index]?.colorStops[0]?.color,
                            }
                        }
                    },
                })),
                // 设置高亮区域样式
                emphasis: {

                    itemStyle: {
                        shadowBlur: 40,
                        shadowColor: 'rgb(0,0,0,1)',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0
                    },
                }
            }
        ]
    };

    useEffect(() => {


        pieChart = echarts.init(echartRef.current, "dark");
        pieChart.clear();
        if (echartRef.current && list.length > 0) {
            pieChart.setOption(options);
        } else {
            pieChart.setOption(notFoundData, true);
        }


    }, [list, echartRef, filedsName, title])



    return (
        <div style={style} ref={echartRef}>
        </div>
    )
}
export default HollowShadowRingGraph;